<template>
	<div>
		<mj-title type="h2" title="Button"></mj-title>
		<div class="page-desc">基础组件-按钮，拥有不同风格与尺寸，绑定click事件。</div>

		<mj-title type="h5" title="基础按钮"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<div>
					<mj-button>Default</mj-button>
					<mj-button type="primary" disabled>Primary</mj-button>
					<mj-button type="disabled">Disabled</mj-button>
					<mj-button type="normal">normal</mj-button>
					<mj-button type="info">Info</mj-button>
					<mj-button type="success">Success</mj-button>
					<mj-button type="warning">Warning</mj-button>
					<mj-button type="error">Error</mj-button>
					<mj-button type="text">Text</mj-button>
					<br><br>
					<mj-button type="primary" hollow>Primary</mj-button>
					<mj-button type="normal" hollow>normal</mj-button>
					<mj-button type="info" hollow>Info</mj-button>
					<mj-button type="success" hollow>Success</mj-button>
					<mj-button type="warning" hollow>Warning</mj-button>
					<mj-button type="error" hollow>Error</mj-button>
				</div>
				<mj-divider>按钮类型</mj-divider>
				<div class="page-desc">通过设置<code>type</code>为<code>primary</code>、<code>disabled</code>、<code>normal</code>、<code>info</code>、<code>success</code>、<code>warning</code>、<code>error</code>、<code>text</code>创建不同样式的按钮，不设置为默认样式。</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
				<code class="language-html line-numbers">
				&lt;mj-button>Default&lt;/mj-button&gt;
				&lt;mj-button type="primary">Primary&lt;/mj-button&gt;
				&lt;mj-button type="disabled">Dashed&lt;/mj-button&gt;
				&lt;mj-button type="normal">normal&lt;/mj-button&gt;
				&lt;mj-button type="info">Info&lt;/mj-button&gt;
				&lt;mj-button type="success">Success&lt;/mj-button&gt;
				&lt;mj-button type="warning">Warning&lt;/mj-button&gt;
				&lt;mj-button type="error">Error&lt;/mj-button&gt;
				&lt;mj-button type="text">Text&lt;/mj-button&gt;
				&lt;mj-button type="primary" hollow>Primary&lt;/mj-button&gt;
				&lt;mj-button type="normal" hollow>normal&lt;/mj-button&gt;
				&lt;mj-button type="info" hollow>Info&lt;/mj-button&gt;
				&lt;mj-button type="success" hollow>Success&lt;/mj-button&gt;
				&lt;mj-button type="warning" hollow>Warning&lt;/mj-button&gt;
				&lt;mj-button type="error" hollow>Error&lt;/mj-button&gt;
				</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="不同尺寸风格按钮"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<div>
					<mj-button type="primary" size="large">large</mj-button>
					<mj-button type="primary">normal</mj-button>
					<mj-button type="primary" size="small">small</mj-button>
					<mj-button shape="border">圆角</mj-button>
					<mj-button type="primary" icon="search" shape="circle"></mj-button>
					<mj-button type="primary" icon="search" shape="circle" size="large"></mj-button>
				</div>
				<mj-divider>size</mj-divider>
				<div class="page-desc">
					<p>按钮有三种尺寸：大、默认（中）、小</p>
					<p>通过设置size为large和small将按钮设置为大和小尺寸，不设置为默认（中）尺寸。</p>
					<p>另外提供<code>shape</code>属性：<code>border</code>（圆角），以及<code>circle</code>（圆），两种按钮风格</p>
				</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
				<code class="language-html line-numbers">
				&lt;mj-button type="primary" size="large">large&lt;/mj-button>
				&lt;mj-button type="primary">normal&lt;/mj-button>
				&lt;mj-button type="primary" size="small">small&lt;/mj-button>
				&lt;mj-button shape="border">圆角&lt;/mj-button>
				&lt;mj-button type="primary" icon="search" shape="circle">&lt;/mj-button>
				&lt;mj-button type="primary" icon="search" shape="circle" size="large">&lt;/mj-button>
				</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="图标按钮"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<div>
					<mj-button type="primary" icon="search">搜索</mj-button>
					<mj-button type="primary" icon="cloud-upload">上传</mj-button>
					<mj-button type="primary" icon="download">下载</mj-button>
					<mj-button icon="arrow-left">返回</mj-button>
					<mj-button icon="edit">编辑</mj-button>
					<mj-button icon="add">添加</mj-button>
					<mj-button type="error" hollow icon="delete">删除</mj-button>
				</div>
				<mj-divider>图标按钮及按钮形状</mj-divider>
				<div class="page-desc">设置<code>icon</code>属性即可，icon 的列表暂未提供，也可以设置在文字右边的 icon ，只要使用<code>i</code>标签即可，可以使用自定义图标</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
				<code class="language-html line-numbers">
				&lt;mj-button type="primary" icon="search">搜索&lt;/mj-button>
				&lt;mj-button type="primary" icon="upload">上传&lt;/mj-button>
				&lt;mj-button type="primary" icon="download">下载&lt;/mj-button>
				&lt;mj-button icon="arrow-left">返回&lt;/mj-button>
				&lt;mj-button icon="edit">编辑&lt;/mj-button>
				&lt;mj-button icon="add">添加&lt;/mj-button>
				&lt;mj-button type="error" hollow icon="delete">删除&lt;/mj-button>
				</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="Block按钮"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<div>
					<mj-button type="primary" size="large" block>primary</mj-button>
					<mj-button size="large" block>default</mj-button>
				</div>
				<mj-divider>图标按钮及按钮形状</mj-divider>
				<div class="page-desc">设置<code>block</code>属性，将使按钮宽度100%</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
				<code class="language-html line-numbers">&lt;mj-button type="primary" block>primary&lt;/mj-button>
				&lt;mj-button block>default&lt;/mj-button>
				</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="Loading"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<div>
					<mj-button type="primary" :loading="loading">{{ loading ? "Loading" : "Default" }}</mj-button>
					<mj-button @click="toLoading1">点击切换到Loading状态</mj-button>
				    <mj-button type="primary" :loading="loading2" @click="toLoading2">
				        <span v-if="!loading2">Click me!</span>
				        <span v-else>Loading...</span>
				    </mj-button>
				</div>
				<mj-divider>加载中状态</mj-divider>
				<div class="page-desc">通过添加<code>loading</code>属性可以让按钮处于加载中状态，后两个按钮在点击时进入加载状态。</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
				<code class="language-html line-numbers">
				&lt;template>
				  &lt;mj-button type="primary" :loading="loading">{ loading ? "Loading" : "Default" }&lt;/mj-button>
				  &lt;mj-button @click="toLoading1">点击切换到Loading状态&lt;/mj-button>
				  &lt;mj-button type="primary" :loading="loading2" @click="toLoading2">
				    &lt;span v-if="!loading2">Click me!&lt;/span>
				    &lt;span v-else>Loading...&lt;/span>
				  &lt;/mj-button>
				&lt;/template>
				&lt;script>
				export default {
				  data(){
				    return {
				      loading:false,
				      loading2: false,
				    }
				  },
				  methods:{
				    toLoading1: function() {
				      this.loading = !this.loading;
				    },
				    toLoading2 () {
				      let that = this;
				      this.loading2 = true;
				      setTimeout(() => {
				        that.loading2 = false;
				      },3000)
				    },
				  }
				}
				&lt;/script>
				</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="按钮组"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<div class="flex">
					<div class="mj-btn-group">
						<mj-button type="primary">Left</mj-button>
						<mj-button type="primary">Center</mj-button>
						<mj-button type="primary">Right</mj-button>
					</div>
					<div class="mj-btn-group ml30">
						<mj-button icon="arrow-left">Left</mj-button>
						<mj-button>Right<Icon type="arrow-right" /></mj-button>
					</div>
				</div>
				<mj-divider>按钮组合</mj-divider>
				<div class="page-desc">
				<p>把多个<code>&lt;mj-button&gt;</code>组件放入 <code>class="mj-btn-group"</code> 元素中，实现组合效果。</p>
				<p>通过设置<code>mj-btn-group</code>的属性<code>size</code>为<code>large</code>和<code>small</code>，可将按钮组尺寸设置为大和小，不设置<code>size</code>，则为默认（中）尺寸。</p>
				<p>通过设置<code>mj-btn-group</code>的属性<code>shape</code>为<code>circle</code>，可将按钮组形状设置为圆角。</p>
				</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
				<code class="language-html line-numbers">&lt;div class="mj-btn-group"&gt;
				  &lt;mj-button type="primary">Left&lt;/mj-button&gt;
				  &lt;mj-button type="primary">Center&lt;/mj-button&gt;
				  &lt;mj-button>Right&lt;Icon type="arrow-right" />&lt;/mj-button>
				&lt;/div&gt;
				</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="Click 事件"></mj-title>
		<div class="page-desc">button上绑定click事件。</div>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-button type="primary" @click="onClick">button-click</mj-button>
				<mj-divider>click事件绑定</mj-divider>
				<div class="page-desc">在组件上绑定<code>@click</code>，自定义一个事件</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
				<code class="language-js line-numbers">&lt;template>
				  &lt;mj-button type="primary" @click="onClick">button-click&lt;/mj-button&gt;
				&lt;/template>
				&lt;script>
				export default {
				  methods:{
				    onClick:function(){
				      alert('点击button')
				    }
				  }
				}
				</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="API"></mj-title>
		<mj-title type="h6" title="Button 参数"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>type</td>
					<td>按钮类型，可选值为 <code>primary</code>、<code>dashed</code>、<code>normal</code>、<code>info</code>、<code>success</code>、<code>warning</code>、<code>error</code>或者不设置</td>
					<td>String</td>
					<td>default</td>
				</tr>
				<tr>
					<td>size</td>
					<td>按钮大小，可选值为<code>large</code>、<code>small</code>或者不设置</td>
					<td>String</td>
					<td>default</td>
				</tr>
				<tr>
					<td>hollow</td>
					<td>镂空属性，按钮描边样式</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>shape</td>
					<td>按钮形状，可选值为<code>circle</code>、<code>border</code>或者不设置</td>
					<td>String</td>
					<td>default</td>
				</tr>
				<tr>
					<td>disabled</td>
					<td>设置按钮为禁用状态</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>icon</td>
					<td>设置按钮的图标类型</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>loading</td>
					<td>设置按钮为加载中状态</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>block</td>
					<td>开启后，按钮的长度为 100%</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>to</td>
					<td>跳转的链接</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>target</td>
					<td>相当于 a 链接的 target 属性</td>
					<td>String</td>
					<td>_self</td>
				</tr>
				<tr>
					<td>native-type</td>
					<td>原生 type 属性 可选值<code>button</code>、<code>submit</code>、<code>reset</code></td>
					<td>string</td>
					<td>button</td>
				</tr>
				<tr>
					<td>disabled</td>
					<td>是否禁用状态</td>
					<td>boolean</td>
					<td>false</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Button 事件"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>事件名</th>
					<th>说明</th>
					<th>回调参数</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>onClick</td>
					<td>按钮点击事件</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Button Group 参数"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>size</td>
					<td>按钮组合大小，可选值为<code>large</code>、<code>small</code>或者不设置</td>
					<td>String</td>
					<td>default</td>
				</tr>
				<tr>
					<td>shape</td>
					<td>按钮组合形状，可选值为<code>circle</code>或者不设置</td>
					<td>String</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>
<script>
export default {
	data(){
		return {
			loading:false,
			loading2: false,
		}
	},
	methods:{
		onClick:function(){
			alert('点击button')
		},
        toLoading1: function() {
            this.loading = !this.loading;
        },
        toLoading2 () {
        	let that = this;
            this.loading2 = true;
            setTimeout(() => {
            	that.loading2 = false;
            },2000)
        },
	}
}
</script>

<style scoped>
#app .tab-content {margin-bottom: 50px;}
</style>